feat: Add tree components to the detail page and files page prelimina…#1162
Conversation
…rily, and modify the table icon styles.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
This PR integrates a tree component into both the repository tree and file‐blob views, adds a flag prop to control navigation behavior, and updates icon sizing and layout in the file diff sidebar.
- Pass a
flagprop toRepoTreein tree and blob pages and fetch/filter directory data in the blob page. - Replace the manual file list in
FileDiffwith the newTreeViewcomponent. - Adjust icon size and spacing in
CodeTable.
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| pages/[org]/code/tree/[...path]/index.tsx | Add flag="contents" to RepoTree |
| pages/[org]/code/blob/[...path].tsx | Integrate RepoTree, fetch/filter tree data, add flag |
| components/DiffView/TreeView.tsx | New rich tree‐view component with drag/drop and async load |
| components/DiffView/FileDiff.tsx | Swap out file list for TreeView |
| components/CodeView/TreeView/RepoTree.tsx | Extend RepoTree with flag, update navigation logic |
| components/CodeView/CodeTable.tsx | Update icon sizes and spacing |
Comments suppressed due to low confidence (2)
moon/apps/web/pages/[org]/code/blob/[...path].tsx:97
- [nitpick] The name
newDirectoryis ambiguous (it actually holds filtered file items). Consider renaming to something likefileItemsorfilteredItemsfor clarity.
const [newDirectory, setNewDirectory] = useState<any[]>([])
moon/apps/web/components/CodeView/TreeView/RepoTree.tsx:146
- [nitpick] The prop name
flagis vague. Consider renaming to something likeviewModeornavigationModewith a typed union ('contents' | 'detail') for clarity.
const RepoTree = ( {flag, directory }: {flag:string, directory: any[] }) => {
| </Flex> | ||
| </Flex> |
There was a problem hiding this comment.
There are two closing </Flex> tags in a row, which likely mismatches your JSX tree. Please remove the extra closing tag to fix the rendering hierarchy.
| </Flex> | |
| </Flex> | |
| </Flex> | |
| </Flex> |
| const [newDirectory, setNewDirectory] = useState<any[]>([]) | ||
|
|
||
| // eslint-disable-next-line no-console | ||
| console.log(directory, 'directory==directory') |
There was a problem hiding this comment.
Leftover debugging console.log calls should be removed or replaced with a proper logger to avoid cluttering the console in production.
| // eslint-disable-next-line no-console | ||
| console.log(filteredItems, 'filteredItems=='); |
There was a problem hiding this comment.
Remove this debug console.log or gate it behind a development flag to keep production logs clean.
| // eslint-disable-next-line no-console | |
| console.log(filteredItems, 'filteredItems=='); | |
| if (process.env.NODE_ENV === 'development') { | |
| console.log(filteredItems, 'filteredItems=='); | |
| } |
|
|
||
| return { | ||
| id: uuidv4(), | ||
| label: '我是文件夹', |
There was a problem hiding this comment.
This hardcoded placeholder '我是文件夹' should be replaced with item.name so that each node shows its actual folder name.
| label: '我是文件夹', | |
| label: item.name, |
| return ( | ||
| <TreeItemProvider {...getContextProviderProps()}> | ||
| <TreeItemRoot {...getRootProps(other)}> | ||
| {item.label === '加载中...' ? ( |
There was a problem hiding this comment.
[nitpick] Using a hardcoded Chinese literal for loading ('加载中...') may not be expected in all locales—consider extracting to a constant or i18n resource.
| }, [response, isLoading, error, loadPath, targetNodeId, treeData, convertToTreeData, updateTreeData]); | ||
|
|
||
|
|
||
| const handleNodeSelect = useCallback( |
There was a problem hiding this comment.
handleNodeSelect is empty and never performs any action. You likely need to implement navigation or a selection callback here.
| if (flag ==='contents' && node?.isLeaf) { | ||
| router.push(`/${scope}/code/blob${basePath}/${fullPath}`); |
There was a problem hiding this comment.
Navigation on leaf click only happens when flag === 'contents'. The detail flag case is unhandled, so clicking in the blob page won't navigate—please adjust logic for both modes.
| if (flag ==='contents' && node?.isLeaf) { | |
| router.push(`/${scope}/code/blob${basePath}/${fullPath}`); | |
| if (flag === 'contents' && node?.isLeaf) { | |
| router.push(`/${scope}/code/blob${basePath}/${fullPath}`); | |
| } else if (flag === 'detail' && node?.isLeaf) { | |
| router.push(`/${scope}/code/detail${basePath}/${fullPath}`); |
| className='rounded-lg w-[300px] h-[85vh] p-2 overflow-y-auto sticky top-5' | ||
| > | ||
| <ul> | ||
| {/* <ul> |
There was a problem hiding this comment.
There’s a large commented‐out block of list code with mismatched braces. Please remove or properly format this dead code to keep the component clean.
…rily, and modify the table icon styles.